<template>
  <div id="info-box">
    <el-tabs type="card" id="tab-box" v-model="activeName">

      <el-tab-pane label="登录">
        <h1>登录</h1>
        <el-form ref="form" :model="user" label-width="80px">
          <el-form-item label="手机号">
            <el-input   v-model="user.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item  label="密码" prop="password">
            <el-input type="password" v-model="user.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-button type="primary" @click="loginfn()">登录</el-button>
          <div align="center">
            <a href="http://localhost:8150/api/ucenter/wx/login">
              <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1717355139,1779463621&fm=26&gp=0.jpg"
                   width="100">
            </a>
          </div>
        </el-form>

      </el-tab-pane>
      <el-tab-pane label="注册">
        <h1>注册</h1>
        <el-form ref="form"  :model="user" label-width="80px">
          <el-form-item  label="昵称">
            <el-input v-model="user.nickname"></el-input>
          </el-form-item>
          <el-form-item  label="手机号">
            <el-input v-model="user.mobile"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password"></el-input>
          </el-form-item>
          <el-button type="primary" @click="registerfn()">注册</el-button>
        </el-form>

      </el-tab-pane>

    </el-tabs>




  </div>

</template>

<script>
import member from '../api/member'
import cookie from 'js-cookie'

  export default {
    name: "Login",
    data(){
      return{
        user:{
          mobile:"",
          password:'',
          nickname:''
        },
        activeName:this.$route.params.tab,//tab选中的值
      }
    },
    watch:{
      //路由发生变化
      $route(){
        this.activeName = this.$route.params.tab
      }
    },
    methods:{
      //登录
      loginfn(){
        console.log(this.user)
        member.login(this.user)
          .then(response=>{
              //登录，返回token，将登录返回的token在存入cookie里，拦截器会将登录的token放入request的头信息中
              cookie.set('gwt_token',response.data,{domain:'localhost'})
              //根据request头信息中的登录token获取用户信息
            member.getUserInfoByToken()
              .then(response=>{
                //将用户信息放入cookie中
                cookie.set("member_cookie",response.data,{domain:'localhost'})
                window.location.href="/Main"
              })
          })

      },
      //注册
      registerfn(){

        member.register(this.user)
          .then(response=>{
            this.$message({
              message: '注册成功',
              type: 'success'
            });
            this.$router.push({path:'/Login/0'})
          })
      }

    }
  }
</script>

<style scoped>
  #info-box{
    width: 600px;
    height: 500px;
    border: 3px solid #F2F6FC;
    margin: 100px auto;
    padding: 20px 20px 20px 20px;
    border-radius: 20px;
    box-shadow: 0 0 20px #303133;
  }
  #tab-box{
    height: 100%;
  }

</style>
